<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 新增试题 -->
      <div class="add">
        <el-button type="success" icon="el-icon-edit" @click="$router.push({ path: '/questions/new' })">新增试题</el-button>
      </div>
      <!-- 表单 -->
      <el-form ref="formRef" :model="form" label-width="80px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="学科">
              <el-select v-model="form.subjectID" placeholder="请选择学科">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in subjectsList"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级目录">
              <el-select v-model="form.catalogID" placeholder="请选择二级目录">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in secondList"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="标签">
              <el-select v-model="form.tags" placeholder="请选择标签">
                <el-option :label="item.label" :value="item.value" v-for="(item, index) in simpleList"
                  :key="index"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关键字">
              <el-input v-model="form.keyword" placeholder="请根据题干搜索"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试题类型">
              <el-select v-model="form.questionType" placeholder="请选择试题类型">
                <el-option label="单选" :value="1"></el-option>
                <el-option label="多选" :value="2"></el-option>
                <el-option label="简答" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="难度">
              <el-select v-model="form.difficulty" placeholder="请选择难度">
                <el-option label="简单" :value="1"></el-option>
                <el-option label="一般" :value="2"></el-option>
                <el-option label="困难" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="方向">
              <el-select v-model="form.direction" placeholder="请选择方向">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="录入人">
              <el-select v-model="form.creatorID" placeholder="请选择录入人">
                <el-option :label="item.username" :value="item.id" v-for="item in userList" :key="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="题目备注">
              <el-input v-model="form.remarks"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="企业简称">
              <el-input v-model="form.shortName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="城市">
              <el-select v-model="form.region" placeholder="请选择活动区域">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item>
              <el-button @click="resetForm">清除</el-button>
              <el-button type="primary" @click="onSubmit('key')">搜索</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!-- 标签页 -->
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <!-- 总计 -->
        <el-alert :title="'数据一共：' + total + '条'" type="info" show-icon :closable="false"></el-alert>
        <el-tab-pane label="全部" name="first">
          <!-- 全部题目列表 -->
          <questionTable :tableData="tableData" :centerDialogVisible.sync="centerDialogVisible"
            :checkDialogVisible.sync="checkDialogVisible" :OperateDialogVisible.sync="OperateDialogVisible"
            :detailId.sync="detailId" :type.sync="type" :publish.sync="publish"></questionTable>
        </el-tab-pane>
        <el-tab-pane label="待审核" name="second">
          <!-- 等待审核题目列表 -->
          <questionTable :tableData="awaitTableData" :centerDialogVisible.sync="centerDialogVisible"
            :checkDialogVisible.sync="checkDialogVisible" :OperateDialogVisible.sync="OperateDialogVisible"
            :detailId.sync="detailId" :type.sync="type" :publish.sync="publish"></questionTable>
        </el-tab-pane>
        <el-tab-pane label="已审核" name="third">
          <!-- 审核完成题目列表组件 -->
          <questionTable :tableData="finishTableData" :centerDialogVisible.sync="centerDialogVisible"
            :checkDialogVisible.sync="checkDialogVisible" :OperateDialogVisible.sync="OperateDialogVisible"
            :detailId.sync="detailId" :type.sync="type" :publish.sync="publish"></questionTable>
        </el-tab-pane>
        <el-tab-pane label="已拒绝" name="fourth">
          <!-- 拒绝审核题目列表组件 -->
          <questionTable :tableData="rejectTableData" :centerDialogVisible.sync="centerDialogVisible"
            :checkDialogVisible.sync="checkDialogVisible" :OperateDialogVisible.sync="OperateDialogVisible"
            :detailId.sync="detailId" :type.sync="type" :publish.sync="publish"></questionTable>
        </el-tab-pane>
      </el-tabs>
      <!-- 分页器 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
        :page-sizes="[5, 10, 20, 50]" :page-size="100" background :total="total" layout="sizes,prev, next,pager, jumper">
      </el-pagination>
    </el-card>
    <!-- 审查对话框 -->
    <questionPreviewDialog :id="detailId" v-if="centerDialogVisible" v-model="centerDialogVisible" />
    <!-- 审核对话框 -->
    <questionCheckDialog :id="detailId" v-if="checkDialogVisible" v-model="checkDialogVisible" />
    <!-- 操作提示框 -->
    <questionOperateDialog :id="detailId" v-if="OperateDialogVisible" v-model="OperateDialogVisible" :type="type"
      :publish="publish" @updata="getChoiceList()" />
  </div>
</template>

<script>
import {
  choice,
  subjectsList,
  secondList,
  person
} from '@/api/hmmm/questions.js'
import { simple } from '@/api/hmmm/tags.js'
import questionPreviewDialog from '@/module-hmmm/components/questions-preview.vue'
import questionCheckDialog from '@/module-hmmm/components/questions-check.vue'
import questionOperateDialog from '@/module-hmmm/components/questions-operate.vue'
import questionTable from '@/module-hmmm/components/questions-table.vue'

export default {
  components: {
    questionPreviewDialog,
    questionCheckDialog,
    questionOperateDialog,
    questionTable
  },
  data () {
    return {
      form: {
        page: 1,
        pagesize: 5,
        subjectID: '',
        difficulty: '',
        questionType: '',
        tags: '',
        province: '',
        city: '',
        keyword: '',
        remarks: '',
        shortName: '',
        direction: '',
        catalogID: '',
        creatorID: ''
      },
      tableData: [],
      // 学科列表
      subjectsList: [],
      // 二级学科列表
      secondList: [],
      // 标签列表
      simpleList: [],
      // 录入人列表
      userList: [],
      currentPage: 1,
      // 题目详情id
      detailId: 0,
      // 弹出框显示控制变量
      centerDialogVisible: false,
      // 审核控制变量
      checkDialogVisible: false,
      // 上架下架控制变量
      OperateDialogVisible: false,
      // 弹出框类型
      type: '',
      // 题目对象，用于上架下架类型
      publish: {},
      // 标签页默认显示
      activeName: 'first',
      total: 0
    }
  },
  created () {
    this.getChoiceList()
    this.getSubjectsList()
    this.getUserList()
  },
  watch: {
    form: {
      handler (newName, oldName) {
        this.getSecondList(newName.subjectID)
        this.getTagsList(newName.subjectID)
      },
      // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: true,
      deep: true // 开启深度监听，默认是false
    },
    detailId: {
      handler (newName, oldName) {
        this.getChoiceList()
      },
      // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
      immediate: true
    }
  },
  computed: {
    // 等待审核
    awaitTableData () {
      return this.tableData.filter((item) => item.chkState === 0)
    },
    // 完成审核
    finishTableData () {
      return this.tableData.filter((item) => item.chkState === 1)
    },
    // 拒绝审核
    rejectTableData () {
      return this.tableData.filter((item) => item.chkState === 2)
    }
  },
  methods: {
    onSubmit (key) {
      this.getChoiceList(key)
      this.getSubjectsList()
    },
    handleSizeChange (val) {
      console.log(val)
      this.form.pagesize = val
      this.getChoiceList()
    },
    // 分页器页码改变时
    handleCurrentChange (val) {
      console.log(val)
      this.form.page = val
      this.getChoiceList()
    },
    // 标签页切换函数
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 精选题库列表
    async getChoiceList (type) {
      let res = {}
      if (type === 'key') {
        res = await choice({
          page: this.form.page,
          pagesize: this.form.pagesize,
          subjectID: this.form.subjectID,
          keyword: this.form.keyword
        })
        console.log(444444)
      } else {
        console.log(1111)
        res = await choice({
          page: this.form.page,
          pagesize: this.form.pagesize
        })
      }
      this.total = res.data.counts
      this.tableData = res.data.items

      // ------------------------------
    },
    // 获取学科列表
    async getSubjectsList () {
      const res = await subjectsList()
      this.subjectsList = res.data
    },
    // 获取二级学科列表
    async getSecondList (id) {
      const res = await secondList({ subjectID: id })
      this.secondList = res.data
    },
    // 获取标签列表
    async getTagsList (id) {
      const res2 = await simple({ subjectID: id })
      this.simpleList = res2.data
    },
    // 获取录入人
    async getUserList () {
      const res = await person()
      this.userList = res.data
    },
    // 重置表单
    resetForm () {
      this.form = {}
    },
    // 新增试题
    add () { }
  }
}
</script>

<style scoped lang='scss'>
.add {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}
</style>
